@import "~@/assets/styles/_vars.scss";

//Button
.sw-btn{
  border-radius: $sw-border-radius;
  font-weight: 600;
  display: inline-block;
  padding: 6px 16px;
  font-size: 12px;
  outline: 0;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  border: 1px solid $sw-border-color;
  background-color:$sw-white;
  transition: background-color 0.2s;
  user-select: none;
  cursor: pointer;
  &.sw-large{
    padding:8px 14px;
  }
  &.sw-small{
    padding:5px 12px;
  }
  &.sw-circle{
    border-radius:50%;
  }

  &.sw-primary{
    background-color:$sw-primary-color;
    border-color:darken($sw-primary-color,2%);
    color:#fff;
    &:hover{
      background-color:darken( $sw-primary-color, 8% );
    }
  }

  &.sw-plain{
    background-color:#fff;
    border-color:#333;
    color:#333;
    &:hover{
      border-color:$sw-primary-color;
    }
  }

}

// Form Inputs
textarea,
input[type="text"]:not(.el-input__inner),
input[type="password"]:not(.el-input__inner){
  border-radius:$sw-border-radius;
  border:1px solid #C5D9E8;
  transition: border .2s;
  outline: none;
  font-size:$--input-font-size;
  height:$--input-height;
  padding: 0 5px;
  box-sizing: border-box;
  &::placeholder { color: #ccc;}
  &:-ms-input-placeholder {color: #ccc;}
  &::-ms-input-placeholder {color: #ccc;}

  &.sw-medium{
    font-size:$--input-medium-font-size;
    height:$--input-medium-height;
  }
  &.sw-small{
    font-size:$--input-small-font-size;
    height:$--input-small-height;
  }

  &.sw-primary{
    border-color:$sw-primary-color;
  }


  &.sw-dark{
    border-color: darken($sw-primary-color,15%);
    background-color:#222;
    color:#fff;
    font-size:13px;
    &::placeholder { color: #555;}
    &:-ms-input-placeholder {color: #555;}
    &::-ms-input-placeholder {color: #555;}
    &:disabled{
      border-color:#444;
      background-color:#2A2A2A;
    }
  }
  &:focus,
  &:active{
    border-color:$sw-primary-color;
  }
  &:disabled{
    border-color:lifghten($sw-border-color,10%);
    background-color:rbga(0,0,0, 0.2);
  }
}

textarea{
  &::-webkit-scrollbar-track{
    background-color: transparent;
  }
  
  &::-webkit-scrollbar{
    width: 8px;
    height: 8px;
    background-color: transparent;
  }
  
  &::-webkit-scrollbar-thumb{
    background-color: rgba(50,50,50, .5);
  }


}


//Radio
.sw-radio {
  display: none;
  & + label {
    -webkit-appearance: none;
    background-color:$sw-primary-color;
    border: 4px solid $sw-primary-color;
    border-radius: 10px;
    width: 100%;
    display: inline-block;
    position: relative;
    width: 10px;
    height: 10px;
  }
}

.regular-radio:checked + label {
  background: $sw-dark-bg1;
  border: 4px solid $sw-primary-color;
}
